<template>
    <div>

        <!--搜索弹框-->
        <el-dialog
                    title="搜索"
                    :visible.sync="dialogVisible"
                    width="30%">
            <el-form ref="form" label-width="80px" style="margin-left: 60px;margin-right:70px">
                <el-form-item label="电影名: ">
                    <el-input v-model="name"></el-input>
                </el-form-item>
                <el-form-item label="放映时间: ">
                    <el-input v-model="time"></el-input>
                </el-form-item>
            </el-form>
            <el-button type="primary" icon="el-icon-search" @click="init">搜索</el-button>

                <span slot="footer" class="dialog-footer">
                </span>
            </el-dialog>

        <el-dialog
                title="订单详情"
                :visible.sync="ordershow"
                width="30%">
        </el-dialog>

        <el-row>
            <el-col :span="24"><div class="grid-content bg-purple-dark">
                <el-table
                        :data="tableData"
                        highlight-current-row
                        @current-change="handleCurrentChange"
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="订单号"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="电影名"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="time"
                            label="放映时间"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="price"
                            label="票价"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="num"
                            label="购买数量"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="money"
                            label="总价"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            label="操作"
                            width="280">
                        <template>
                                <el-button type="primary" icon="el-icon-reading" style="margin-left: 10px">查看订单</el-button>
                        </template>

                    </el-table-column>

                </el-table>
            </div></el-col>
        </el-row>

        <el-row style="margin-top: 30px;margin-right: 400px">
            <el-col :span="12"><div class="grid-content bg-purple-dark">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        v-bind:total="total"
                        v-bind:page-size="pageSize"
                        @current-change="change"
                >
                </el-pagination>
            </div></el-col>

            <el-col :span="12"><div class="grid-content bg-purple-dark">
                <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            </div></el-col>
        </el-row>
    </div>

</template>

<script>
    export default {
        name: "component",
        components: {},
        data(){
            return{
                //分页数据
                tableData: [],
                total: 50,
                pageSize: 4,
                currentPage: 1,

                //搜索
                dialogVisible: false, //是否弹出消息框
                name: '', //搜索电影名
                time: '', //搜索放映时间


            }
        },
        mounted() {
            this.init()
        },
        methods:{
            change(currentPage){
                this.currentPage = currentPage;
                // eslint-disable-next-line no-undef
                this.init()
            },

            //初始化页面
            init(){
                // this.axios.get("/findAll/findAll").then(
                //     r =>{
                //         this.tableData = r.data
                //     }
                // )
                // eslint-disable-next-line no-unused-vars
                let a = "1";
                // eslint-disable-next-line no-unused-vars
                let b = "1";
                if (this.name != ''){
                    a = this.name;
                }if (this.time != ''){
                    b = this.time
                }

                this.axios.get("/findAll/findPage/"+this.currentPage+"/"+this.pageSize+"/"+a+"/"+b).then(
                    r => {
                        this.tableData = r.data.records;
                        this.total = r.data.total
                        this.dialogVisible = false;
                    }
                )
            },

            //搜索方法
            search(){
                this.dialogVisible = true;
            }



        }
    }
</script>

<style scoped>

</style>